<template>
  <div class="overall-page page">
    <div class="overall-container">
      <div class="top-container">
        <div class="top-item">
          <el-row style="width: 100%;" class="mb21 cusHeight">
            <Card title="全区工业分析" :is-export="true" :is-select="false"  page="216">
              <BarCharts :source="barList1"
              :grid="{ top: 40, bottom: -20, left: 20, right: 10 }"
              :legend="true" :loading="false" :barWidth="15" :barRadius="[0,0,0,0]"/>
            </Card>
          </el-row>

          <el-row style="width: 100%;" class="mb2 cusHeight">
            <Card title="规上工业企业情况" use2025-path :is-export="true" page="256">
              <BarCharts :source="barList2"
              :grid="{ top: 40, bottom: -20, left: 20, right: 10 }"
              :legend="true" :loading="false" :barWidth="15" :barRadius="[0,0,0,0]"/>
            </Card>
          </el-row>
        </div>
        <div class="top-item1">
          <div id="industryMap" class="chart"></div>
          <div class="map-tooltip" v-if="tooltipShow">
            <div class="map-tooltip-title">{{ cityName }}</div>
            <div style="position: absolute;right: 0;top:10px;width: 30px;height: 30px" @click="tooltipShow"></div>
            <div class="map-tooltip-content">
              <div class="tooltip-item" v-for="(item,index) in toolList" :key="index">
                <div class="value">
                  <span class="number">{{item.value}}</span>
                  <span class="unit">{{item.unit}}</span>
                </div>
                <div class="label">{{item.name}}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="top-item">
          <el-row style="width: 100%;" class="mb21 cusHeight">
            <Card title="工业发展路径分析" use2025-path :is-export="true" page="256">
              <BarCharts :source="lineData"  ::barWidth="15" :barRadius="[0,0,0,0]" :legend="true" :loading="false" :grid="{top: 40, bottom: -20, left: 20, right: 10}"></BarCharts>
            </Card>
          </el-row>
          <el-row class="info-item cusHeight">
            <Card title="新能源及装备制造情况" use2025-path :is-export="true"  page="270">
              <BarCharts :source="barList3"
              :grid="{ top: 40, bottom: -20, left: 20, right: 10 }"
              :legend="true" :loading="false" :barWidth="15" :barRadius="[0,0,0,0]"/>

            </Card>
          </el-row>

        </div>
      </div>
      <div class="info-block">

        <div class="info-container">
          <el-row class="info-item cusHeight">
            <Card title="储能产业链建设情况" :is-export="true" page="273">
              <BarCharts :source="lineData2"  :barWidth="15" :barRadius="[0,0,0,0]" :loading="false" :grid="{top: 40, bottom: -20, left: 20, right: 10}"></BarCharts>
            </Card>
          </el-row>
          <el-row class="info-item cusHeight">
            <Card title="新型工业化发展路径分析" :is-export="true" page="253">
              <AutomaticScrolling>
                <div class="scroll-item">
                  构建“一核三园”发展格局，以酒泉经济技术开发区为核心，聚焦清洁能源、智能制造、生物医药、新型建材、农产品加工 五大工业主导产业，加快推进酒泉新能源综合利用产业园（经开区东园） 、农产品精深加工产业园、明沙窝煤电产业园建设，形 成梯次推进、支柱多元、优势互补、特色鲜明、布局合理、绿色低碳的现代工业体系。
                  到 2026 年，工业总产值力争达到 600 亿元，工业增加值年均增长 12%，突破 100 亿元，占 GDP 比重达到 18%，规上工业增 速进入全省县域排名前 20 名；规模以上工业企业突破 150 户；战略性新兴产业占规模以上工业增加值比重达到 30% 以上；高技术 产业营业收入占工业营业收入比重达到 4% 以上；有研发活动的规模以上工业企业占比达到 29.5%; 规模以上工业企业研发经费占 主营业务收入比重达到 2% 以上。到 2035 年，工业总产值达到 1800 亿元，工业年均增速快于地区生产总值增速，工业增加值突破 280 亿元，占 GDP 比重达到 22% 以上，工业综合竞争力显著增强，绿色发展底色更加鲜亮，新型工业化取得重大发展。"
                </div>
              </AutomaticScrolling>
            </Card>
          </el-row>

          <el-row class="info-item cusHeight">
            <Card title="能源及发电情况" use2025-path :is-export="true"  page="280">
              <EchartsBarChart
                  :indicators="indicators6"
                  :values="values6"
              />
            </Card>
          </el-row>
        </div>
        <div class="info-container">
          <el-row class="info-item cusHeight">
            <Card title="光热产业链"  use2025-path :is-export="true" page="280">
              <el-image :src="require('@/assets/images/industry/guangre.png')" fit="contain" />
            </Card>
          </el-row>

          <el-row class="info-item cusHeight">
            <Card title="能源基本情况及分类" :is-export="true"  page="260">
              <BarCharts :source="barList"
               :grid="{ top: 40, bottom: -20, left: 20, right: 10 }"
              :legend="true" :loading="false" :barWidth="15" :barRadius="[0,0,0,0]"/>
            </Card>
          </el-row>
          <el-row class="info-item cusHeight">
            <Card title="明沙窝工业园区情况" :is-export="true" page="258">
              <IntroductionCard
                  content="园区位于肃州区银 达镇明沙窝村以北， 规划面积暂未划定。  巴丹吉林沙漠大基地 400 万千瓦调峰煤电项 目位于银达明沙窝，项  目规划建设装机容量 4×1000MW，  厂 区 主 要新建锅炉房、汽轮机、 烟囱、间冷塔等生产设  施，同步建设运煤专线、 储煤棚等，配套建设办  公、住宿及生活设施。"
              />
            </Card>
          </el-row>
        </div>
        <div class="info-container">
          <el-row class="info-item  cusHeight">
            <Card title="新材料产业分析" :is-export="true" page="250">
              <AutomaticScrolling>
                <div class="scroll-item">
                  1. 大力发展三大先进基础材料。一是以先进钢铁材料、先进铜基、先进铝基、先进镁基等先进有色金属材料为重点发展方向， 着力丰富产品类型， 提升产品质量，打造具有国际竞争力的先进金属材料集群。二是面向电子信息、新能源、智能制造等领域需求， 依托酒泉经开区（高新区）产业基础， 大力发展电子级超薄电解铜箔、高端异型铜带等。三是聚焦建筑业、消费电子、新能源等领域高端铝材需求，依托酒钢集团铝资源优势，推动铝基新  材料向下游延伸，大力发展高端铝合金型材、管材、棒材、储氢用大规格铝合金管材、包装用铝材、印刷用铝材、交通运输铝型材、高端铝箔，打造  在国内具有重要影响力的铝基材料产业基地。2. 大力发展无机非金属新材料。重点发展特种玻璃， 中硼硅药用玻璃、石墨新材料、石墨烯负极材料、蓝  宝石新材料、特种功能水泥、绿色低碳高性能胶凝材料、高活性矿物质掺合料等。3. 重点培育新能源材料、高性能纤维及复合材料等两大关键战略材料。 围绕丰富的风光资源，依托经开区风光电“链主”企业，加快动力电池、正（负）极材料、电池级铜箔、陶瓷基、石墨烯基、金属基、炭 / 炭等复合材料， 风电叶片材料发展。4. 加速布局前沿新材料。面向科技前沿，把握未来产业发展趋势，鼓励龙头企业开展前沿新材料研发创新工程，加快前沿新材料  技术攻关和产业化应用突破，聚焦增材制造材料（3D 打印）、智能仿生材料、超导材料、石墨烯材料、液态金属、高熵合金等细分领域，开展新材料  前沿与交叉技术研究，通过研发一批、储备一批、应用一批，抢占产业发展制高点。"
                </div>
              </AutomaticScrolling>
            </Card>
          </el-row>
          <el-row class="info-item cusHeight">
            <Card title="发电装机项目情况" :is-export="true"  page="263">
              <EchartsBarChart
                  :indicators="indicators8"
                  :values="values8"
              />
            </Card>
          </el-row>
          <el-row class="info-item cusHeight">
            <Card title="330 千伏及以上电网工程建成、规划情况" :is-export="true"  page="269">
              <TableComponent :headers="headers" :data="tableData" />
            </Card>
          </el-row>
        </div>
        <div class="info-container">
          <el-row class="info-item cusHeight">
            <Card title="风电产业链重点企业情况" :is-export="true"  page="269">
              <BarCharts :source="barData" :loading="false" :barWidth="30" :grid="{top: 40, bottom: -20, left: 20, right: 10}"></BarCharts>
            </Card>
          </el-row>
          <el-row class="info-item cusHeight">
            <Card title="风电主机系统各部件生产企业情况" :is-export="true"  page="270">
              <el-row :gutter="10" style="width: 100%;height:50%;padding: 10px 0">
                <el-col style="height: 100%" :span="4">
                </el-col>
                <el-col style="height: 100%" :span="8">
                  <CategoryProportion number="500 万千瓦" text="华锐风电科技（甘肃）有限公司发电机"></CategoryProportion>
                </el-col>
                <el-col style="height: 100%" :span="8">
                  <CategoryProportion number="10 万吨" text="日月重工（甘 肃）有限公司主机架"></CategoryProportion>
                </el-col>
                <el-col style="height: 100%" :span="4">

                </el-col>
              </el-row>
              <el-row :gutter="10" style="width: 100%;height:50%;padding: 10px 0">
                <el-col style="height: 100%" :span="8">
                  <CategoryProportion number="10 万吨" text="日月重工（甘 肃）有限公司轮毂"></CategoryProportion>
                </el-col>
                <el-col style="height: 100%" :span="8">
                  <CategoryProportion number="300 台" text="酒泉市宜合达环保有限公司导流罩"></CategoryProportion>
                </el-col>
                <el-col style="height: 100%" :span="8">
                  <CategoryProportion number="1400 台" text="酒泉南高齿传动系统有限责任公司齿轮箱"></CategoryProportion>
                </el-col>
              </el-row>
            </Card>
          </el-row>
          <el-row class="info-item cusHeight">
            <Card title="砂石矿企业" :is-export="true" page="290">
              <TableComponent :headers="headers12" :data="tableData12" />
            </Card>
          </el-row>
        </div>
        <div class="info-container">
          <el-row class="info-item cusHeight">
            <Card title="氢能产业链生产企业情况" :is-export="true"   page="271">
              <TableComponent :headers="headers4" :data="tableData4" />
            </Card>
          </el-row>
          <el-row class="info-item cusHeight">
            <Card title="砂石矿储量及开发利用情况" :is-export="true" page="289">
              <PieCharts :source="pieSource" :loading="false"></PieCharts>
            </Card>
          </el-row>
          <el-row class="info-item cusHeight">
            <Card title="装机容量" :is-export="true"  page="259">
              <EchartsBarChart
                  :indicators="indicators4"
                  :values="values4"
              />
            </Card>

          </el-row>
        </div>
        <div class="info-container">
          <el-row class="info-item cusHeight">
            <Card title="新型储能项目情况" :is-export="true"  page="274">
              <AutomaticScrolling>
                <div class="scroll-item">
                  肃州区新型储能项目共计 1 个，总功率 500 兆瓦、能量 2000 兆瓦时。（在建项目 1 个、功率 500 兆瓦、2000 兆瓦时）                </div>
              </AutomaticScrolling>
            </Card>
          </el-row>
          <el-row class="info-item cusHeight">
            <Card title="智慧电网产业链生产企业情况" :is-export="true"   page="275">
              <TableComponent :headers="headers8" :data="tableData8" />
            </Card>
          </el-row>
          <el-row class="info-item cusHeight">
            <Card title="光伏系统各部件生产企业情况" :is-export="true" page="272">
              <el-row :gutter="10" style="width: 100%;height:50%;padding: 10px 0">
                <el-col style="height: 100%" :span="4">
                </el-col>
                <el-col style="height: 100%" :span="8">
                  <CategoryProportion number="电池片 2GW" text="酒泉正泰新能源科技有限公司"></CategoryProportion>
                </el-col>
                <el-col style="height: 100%" :span="8">
                  <CategoryProportion number="组件加工 1.5GW" text="酒泉绿能科技装备有限公司"></CategoryProportion>
                </el-col>
                <el-col style="height: 100%" :span="4">

                </el-col>
              </el-row>
              <el-row :gutter="10" style="width: 100%;height:50%;padding: 10px 0">
                <el-col style="height: 100%" :span="8">
                  <CategoryProportion number="光伏玻璃 1GW" text="酒泉正泰新能源科技有限公司"></CategoryProportion>
                </el-col>
                <el-col style="height: 100%" :span="8">
                  <CategoryProportion number="边框 2万吨" text="中水四局（酒泉）新材料科技有限公司"></CategoryProportion>
                </el-col>
                <el-col style="height: 100%" :span="8">
                  <CategoryProportion number="逆变器 0.5GW" text="酒泉新晟浩宇电力设备有限公司"></CategoryProportion>
                </el-col>
              </el-row>
            </Card>
          </el-row>

        </div>
        <div class="info-container">
          <el-row class="info-item cusHeight">
            <Card title="发电量、上网电量对比" :is-export="true"   page="280">
              <TableComponent :headers="headers10" :data="tableData10" />
            </Card>
          </el-row>
          <el-row class="info-item cusHeight">
            <Card title="各类发电对比分析" :is-export="true"    page="282">
              <EchartsBarChart
                  :indicators="indicators7"
                  :values="values7"
              />
            </Card>
          </el-row>
          <el-row class="info-item cusHeight">
            <Card title="风电产业链" :is-export="true" page="283">
              <div  style="width: 100%;height: 220px;overflow: auto;padding: 10px">
                <el-image :src="require('@/assets/images/industry/fendian.png')"  fit="contain"/>
              </div>
            </Card>
          </el-row>
        </div>
        <div class="info-container">
          <el-row class="info-item cusHeight">
            <Card title="发电量统计对比分析" :is-export="true"   page="276"  isSelect="true"  @changeSelect="changeSelect" :selectList="[{value:1,label:'2022年度'},{value:2,label:'2023年度'}]">
              <BarChart :list="economyList" :selectId="economyId"  unit="万千瓦时"></BarChart>
            </Card>
          </el-row>
          <el-row class="info-item cusHeight">
            <Card title="建筑业发展路径分析" :is-export="true" page="252">
              <AutomaticScrolling>
                <div class="scroll-item">
                  一是建筑业发展整体趋缓。近几年，随着城市交通、电  力、水利、市政等重点领域基础设施建设逐步完善，城市建 设由外延式扩张向内涵式提升转变，大型建设项目逐年递减， 建筑业发展趋势整体放缓。二是房地产开发发展缓慢，造成  建筑业产值、建安投资增长较慢。三是本地企业市场占有率  低。受综合实力弱、资质等级低、专业技术人员缺乏等因素  影响，本地建筑企业整体竞争力偏弱，严重影响企业投标竞  标，致使区内市场中标率低、区外市场拓展困难，多数项目  均被外地企业承揽，区内企业在同行业竞争中处于劣势。"
                </div>
              </AutomaticScrolling>
            </Card>
          </el-row>
          <el-row class="info-item cusHeight" >
            <Card title="氢能产业链" :is-export="true"  page="286">
              <div  style="width: 100%;height: 220px;overflow: auto;padding: 10px">
                <el-image :src="require('@/assets/images/industry/qinnen.png')"  fit="contain"/>
              </div>
            </Card>
          </el-row>
        </div>
        <div class="info-container">
          <el-row class="info-item cusHeight">
            <Card title="储能产业链" use2025-path :is-export="true" page="287">
              <div  style="width: 100%;height: 220px;overflow: auto;padding: 10px">
                <el-image :src="require('@/assets/images/industry/chuneng.png')"  fit="contain"/>
              </div>
            </Card>
          </el-row>
          <el-row class="info-item cusHeight">
            <Card title="智慧电网产业链"  use2025-path :is-export="true" page="277">
              <div  style="width: 100%;height: 220px;overflow: auto;padding: 10px">
                <el-image :src="require('@/assets/images/industry/zhihuidianwang.png')"  fit="contain"/>
              </div>
            </Card>
          </el-row>
          <el-row class="info-item cusHeight">

            <Card title="光伏产业链" use2025-path :is-export="true" page="285">
              <div  style="width: 100%;height: 220px;overflow: auto;padding: 10px">
                <el-image :src="require('@/assets/images/industry/guangfu.png')"  fit="contain"/>
              </div>
            </Card>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Card from "@/components/Card/Card.vue";
import IntroductionCard from "@/components/Card/IntroductionCard.vue";
import EchartsBarChart from "@/components/Echarts/EchartsBarChart.vue";
import TableComponent from "@/components/TableComponent.vue";
import BarChart from "@/components/Chart/BarChart.vue";
import CategoryProportion from "@/components/CategoryProportion.vue";
import AutomaticScrolling from "@/components/AutomaticScrolling/AutomaticScrolling.vue";
import PieCharts from "@/components/Charts/Pie.vue";
import LineChart from "@/components/Chart/LineChart";
import LineCharts from "@/components/Charts/Line";
import BarCharts from "@/components/Charts/Bar.vue";
import {staticImageToBase64} from "@/utils/utils";
import geoJson from "@/assets/geo/suzhouqu.json";

export default {
  components: {BarCharts, LineCharts,PieCharts, AutomaticScrolling, CategoryProportion, BarChart, EchartsBarChart, Card, IntroductionCard,TableComponent, LineChart},
  data() {
    return {
      barData:{
        xData:[ "甘肃金风风电设备制造有限公司",
          "甘肃明阳智慧能源有限公司",
          "甘肃云风智慧风电设备有限公司",
          "华锐风电科技（甘肃）有限公司",
          "东方电气风电有限公司"],
        yData:{
          '年产量':[
            300,
            200,
            150,
            500,
            200
          ],
        },
        yLabel:'单位：万千瓦'
      },
      lineData:{xData:["装备制造", "电力", "建材", "农产品加工"], yData:{'增长 (%)':[ 63.9, 6.6, -1.4, 1.8], '拉动规下工业增加值(%）':[20.8, 3.7, -0.9, 1.3]}, yLabel:'单位：(%)'},
      lineData2:{xData:[ "酒泉百斯德新能源科技有限公司", "酒泉瑞启时代新能源科技有限公司", "甘肃国润时代能源有限公司", "远景能源股份有限公司（已建成）", "海博思创（酒泉）工程技术有限公司", "鸿合新能源科技（酒泉）有限公司", "酒泉南都电源有限公司储能", "北盛（酒泉）新能源装备有限公司"], yData:{'年产能':[5, 3, 3, 2, 10, 10, 4, 2]}, yLabel:'GWh'},
      pieSource:[{name:'肃州区金佛寺 镇沿山公路北 建筑用砂矿',value:129.76},{name:'肃州区北夹山建筑用花岗岩矿',value: 31.89},{name:'肃州区丰乐镇丰乐滩建筑用砂石矿',value: 108.34}, {name:'肃州区北夹山酒金公路西建筑用花岗岩矿',value: 76.47}],
      barList1: {
        xData: ["规上工业总产值", "规上工业增加值", "战略性新兴产业工业总产值", "节能环保产业", "生物产业", "新能源产业", "新材料产业", "工业企业主营业务收入", "工业企业利税总额", "工业固定资产投资", "工业企业营业收入利润率", "规上工业产品产销率", "工业企业经济效益综合指数"],
        yData: {
          "单位(亿元)": [258.40, 33.1, 121.40, 3.4, 4.3, 92.6, 0, 225.39, 1.55, 89.1, -0.98, 99.2, 0]  // 将null替换为0
        },
        yLabel: "单位：亿元"
      },
      barList2: {
        xData: ["电力", "非金属建材", "化工", "装备制造", "农产品加工", "医药"],
        yData: {
          "行业": [12, 19, 4, 47, 21, 2]
        },
        yLabel: "单位：户"
      },
      "indicators4": ["发电装机容量", "水电", "火电", "核电", "风电", "太阳能发电"],
      "values4": [291965, 42154, 139032, 5691, 44134, 60949],
      barList: {
        xData: ["煤炭（亿吨）", "石油（亿吨）", "天然气（亿立方米）", "铁矿（亿吨）", "锰矿（万吨）", "铬铁矿（万吨）", "晶质石墨（万吨）", "钒（万吨）", "饰面用花岗岩（亿立方米）"],
        yData: {
          "资源储量": [2070.12, 38.06, 65690.12, 162.46, 27561.45, 279.47, 8100.8, 734.39, 22.56]
        },
        yLabel: "单位：见指标"
      },
      "indicators6": ["火电", "水电", "核电", "风电", "太阳能发电"],
      "values6": [42.83, 28.21, 0.57, null, 13.32],
      "indicators7": ["2013年", "2014", "2015", "2016", "2017", "2018", "2019", "2020", "2021", "2022", "2023"], "values7": [19.51, 19.50, 20.40, 25.40, 32.90, 32.90, 38.90, 52.30, 65.70, 82.67, 102.67],
      indicators8: ["亚洲新能源太阳能发电（酒泉）有限公司", "亚洲新能源太阳能发电（酒泉）有限公司", "酒泉易顺杰光伏发电公司", "东方电气（酒泉）太阳能发电有限公司", "东方电气（酒泉）太阳能发电有限公司", "东方电气（酒泉）光伏发电科技有限公司", "东方电气（酒泉）光伏发电科技有限公司"],
      values8: [0.9, 2.0, 0.9, 0.9, 2.0, 0.8, 0.21],
      unit1: ["（亿元）"],
      indicators9: ["风电主机系统各部件生产企业情况", "2023 年  工业总产值 （亿元）", "2023 年  工业增加值 （亿元）"],
      values9: [15, 9.54, 2.23],
      barList3: {
        xData: ["风电主机系统各部件生产企业情况", "2023年工业总产值", "2023年工业增加值"],
        yData: {
          "指标值": [15, 9.54, 2.23]
        },
        yLabel: "单位：亿元"
      },
      economyId: 1,
      economyList :[{
        selectId: 1,
        xData: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
        yData: [8023.7, 7725.126, 8581.889, 9490.617, 10733.904, 10111.612, 10585.348, 8035.072, 10464.616, 10971.939, 8560.827, 9671.789]
      },{
        selectId: 2,
        xData: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
        yData: [9821.163, 10016.204, 13476.34, 11166.519, 8391.68, 12360.065, 13089.358, 12065.419, 12269.526, 11441.615, 10089.762, 8969.826]
      }],
      headers: ["类别", "进度", "项目数", "名称"],
      tableData: [["特高压直流工程", "规划", 1, "陇电入川特高压直流输电工程"], ["750千伏变电站", "建成", 1, "酒泉750KV变电站"], ["330千伏升压站", "建成", 2, "国网330KV明月变升压站；330KV金光变升压站"], ["330千伏升压站", "规划", 1, "建设瓷窑口330KV升压站"],],
      headers4: ["项目", "制氢装备", "加氢", "应用"],
      tableData4: [["已有生产企业", "甘肃青骐骥中能氢能源科技有限公司", "-", "-"], ["年产量", "制氢催化电极网 6万片\n碱性电解水制氢系统 300套", "-", "-"], ["正在建设企业", "-", "东方电气（酒泉）综合智慧能源科技有限公司", "甘肃青骐骥司碧林环保科技有限公司"], ["年产量", "-", "66吨", "循环水电化学设备 100台\n大型智能循环水电化学设备 100台"], ["建设情况", "-", "正在办理土地手续，已完成制氢间、配电间，辅助设施房屋已完成主体建设，线路铺设已完成，设备已全部到场。", "在建"], ["备注", "经开区企业", "区本级企业", "经开区企业"]],
      headers8: [
        "项目",
        "变电系统",
        "输电系统"
      ],
      tableData8: [
        [
          "已有生产企业",
          "低压电器：甘肃华菱电气自动化控制系统有限公司<br>变压器：-<br>高压电器：奥泰开关酒泉奥泰开关有限公司",
          "电线电缆：甘肃新昆缆电线电缆有限公司<br>配电装置：甘肃新昆缆电线电缆有限公司<br>补偿装置：华杰电气酒泉华杰电气股份有限公司<br>互感器：酒泉新晟浩宇电力设备有限公司"
        ],
        [
          "年产量",
          "低压开关设备 1000台<br>高压开关设备 1000台",
          "电力电缆 3万米<br>控制电缆 40万米<br>普通箱式变电站 200台<br>无功补偿装置 200Mvar"
        ],
        [
          "正在建设企业",
          "-",
          "变压器：酒泉博泰电力设备有限公司"
        ],
        [
          "年产量",
          "-",
          "变压器 3000台"
        ],
        [
          "建设情况",
          "-",
          "在建"
        ],
        [
          "备注",
          "以上均为经开区企业。",
          "以上均为经开区企业。"
        ]
      ],
      headers10: [
        "序号",
        "厂家名称",
        "累计发电量 (万千瓦时)",
        "2022 年",
        "2023 年",
        "增长率",
        "累计上网电量 (万千瓦时)",
        "2022 年",
        "2023 年",
        "增长率"
      ],
      tableData10: [
        [
          "1",
          "亚洲新能源（中国）股份有限公司肃州区东洞滩 9 兆瓦、20 兆瓦光伏发电项目",
          "4612.4",
          "4388.22",
          "-4.86%",
          "4553.67",
          "4289.38",
          "-5.80%"
        ],
        [
          "2",
          "酒泉易顺杰光伏电站",
          "1591.95",
          "1626.77",
          "2.19%",
          "1591.97",
          "1626.77",
          "2.19%"
        ],
        [
          "3",
          "东方电气（酒泉）太阳能发电有限公司肃州东洞滩 9 兆瓦、20 兆瓦光伏并网发电项目",
          "4915.60",
          "4649.21",
          "-5.42%",
          "4692.19",
          "4426.95",
          "-5.65%"
        ],
        [
          "4",
          "东方电气（酒泉）光伏发电科技有限公司酒泉职业技术学院 8 兆瓦、2.1 兆瓦并网光伏发电项目",
          "1751.04",
          "1771.51",
          "1.17%",
          "1694.38",
          "1711.64",
          "1.02%"
        ],
        [
          "5",
          "阳光电源股份有限公司（酒泉朝阳）肃州区东洞滩一期 50 兆瓦光伏发电项目",
          "15031.70",
          "14585.52",
          "-2.97%",
          "13743.47",
          "14270.29",
          "3.83%"
        ],
        [
          "6",
          "酒泉市晋坤新能源有限公司（原华电新能源 2013.7.10 调整）肃州区东洞滩 9 兆瓦并网光伏发电项目",
          "2909.06",
          "2704.94",
          "-7.02%",
          "2886.93",
          "2689.73",
          "-6.83%"
        ],
        [
          "7",
          "酒泉海润光伏发电有限公司肃州区东洞滩 50 兆瓦并网光伏发电项目",
          "7612.19",
          "7146.01",
          "-0.06",
          "7550.99",
          "7090.51",
          "-6.10%"
        ],
        [
          "8",
          "北京金易格（酒泉）新能源科技发展有限公司肃州区东洞滩 30 兆瓦戈壁光伏生态设施示范项目",
          "4631.92",
          "4131.71",
          "-0.11",
          "4615.74",
          "4125.64",
          "-10.62%"
        ]
      ],
      headers12: [
        "序号",
        "地点",
        "矿山名称 / 矿山企业名称",
        "开发状态",
        "开采规模",
        "设计生产能力",
        "产量",
        "备注"
      ],
      tableData12: [
        [
          "1",
          "肃州区金佛寺镇",
          "肃州区金佛寺镇沿山公路北建筑用砂矿 / 酒泉万贯建材有限公司",
          "停产",
          "中型",
          "10 万立方米 / 年",
          "0",
          "由于未取得安全生产许可证未生产"
        ],
        [
          "2",
          "肃州区三墩镇",
          "肃州区北夹山建筑用花岗岩矿 / 甘肃诚泰路桥工程有限公司",
          "停产",
          "中型",
          "5 万立方米 / 年",
          "0",
          "由于未取得安全生产许可证未生产"
        ],
        [
          "3",
          "肃州区丰乐镇",
          "肃州区丰乐镇丰乐滩建筑用砂石矿 / 玉门鑫诚鹏达商贸有限公司",
          "停产",
          "中型",
          "10 万立方米 / 年",
          "0",
          "由于未取得安全生产许可证未生产"
        ],
        [
          "4",
          "肃州区三墩镇",
          "肃州区北夹山酒金公路西建筑用花岗岩矿 / 酒泉丝路宏途交通建设发展有限责任公司",
          "筹建",
          "中型",
          "10 万立方米 / 年",
          "0",
          "企业正在筹备矿山建设"
        ]
      ],
      headers13: [
        "序号",
        "矿区名称",
        "开发利用情况",
        "矿区规模",
        "保有资源量（万立方米）",
        "资源量小计（万立方米）",
        "占比（%）",
        "矿业权类型",
        "矿山名称",
        "采矿权获批时间",
        "开发程度"
      ],
      tableData13: [
        [
          "1",
          "肃州区金佛寺镇沿山公路北建筑用砂矿",
          "2022.3 新立，目前正在办理安全生产许可及筹建矿山",
          "中型",
          "129.76",
          "346.46",
          "0.37",
          "采矿权",
          "肃州区金佛寺镇沿山公路北建筑用砂矿",
          "2022.3.25",
          "2022.3 新立，目前正在办理安全生产许可及筹建矿山"
        ],
        [
          "2",
          "肃州区北夹山建筑用花岗岩矿",
          "2022.9 新立，目前正在办理安全生产许可及筹建矿山",
          "中型",
          "31.89",
          "346.46",
          "0.09",
          "采矿权",
          "肃州区北夹山建筑用花岗岩矿",
          "2022.9.15",
          "2022.9 新立，目前正在办理安全生产许可及筹建矿山"
        ],
        [
          "3",
          "肃州区丰乐镇丰乐滩建筑用砂石矿",
          "2023.9 新立，目前正在办理安全生产许可及筹建矿山",
          "中型",
          "108.34",
          "346.46",
          "0.31",
          "采矿权",
          "肃州区丰乐镇丰乐滩建筑用砂石矿",
          "2023.9.12",
          "2023.9 新立，目前正在办理安全生产许可及筹建矿山"
        ],
        [
          "4",
          "肃州区北夹山酒金公路西建筑用花岗岩矿",
          "2023.8 新立，目前正在办理安全生产许可及筹建矿山",
          "中型",
          "76.47",
          "346.46",
          "0.22",
          "采矿权",
          "肃州区北夹山酒金公路西建筑用花岗岩矿",
          "2023.8.18",
          "2023.8 新立，目前正在办理安全生产许可及筹建矿山"
        ]
      ],
      charts: {
        industryMap: null
      },
      list: [{ value: 1, label: 'cs' }],
      cityName:'',
      tooltipShow: false,
      toolList:[]
    };
  },
  methods: {
    changeSelect(e,name){
      if(name==='发电量统计对比分析'){
        this.economyId=e;
      }
    },
    async initChart(id) {
      if (!this.charts[id]) {
        this.charts[id] = this.$echarts.init(document.getElementById(id));
        this.charts[id].showLoading({
          text: '加载中',
          textColor: '#fff',
          maskColor: 'rgba(0,0,0,0)'
        });
        if(id==='industryMap'){
          this.charts[id].on('mouseover',(e)=>{
            this.cityName = e.componentType === 'markPoint' ? e.data.cityName : e.name;
            let list=[{
              "tow": "西峰镇",
              "data": [{
                "name": "工业总产值",
                "value": 5000,
                "unit": "万元"
              },

                {
                  "name": "工业用电量",
                  "value": 1200,
                  "unit": "万千瓦时"
                },
                {
                  "name": "工业就业人数",
                  "value": 800,
                  "unit": "人"
                }
              ]
            },
              {
                "tow": "果园镇",
                "data": [{
                  "name": "工业总产值",
                  "value": 7000,
                  "unit": "万元"
                },

                  {
                    "name": "工业用电量",
                    "value": 1500,
                    "unit": "万千瓦时"
                  },
                  {
                    "name": "工业就业人数",
                    "value": 1000,
                    "unit": "人"
                  }
                ]
              },
              {
                "tow": "银达镇",
                "data": [{
                  "name": "工业总产值",
                  "value": 12000,
                  "unit": "万元"
                },

                  {
                    "name": "工业用电量",
                    "value": 2500,
                    "unit": "万千瓦时"
                  },
                  {
                    "name": "工业就业人数",
                    "value": 1500,
                    "unit": "人"
                  }
                ]
              },
              {
                "tow": "泉湖镇",
                "data": [{
                  "name": "工业总产值",
                  "value": 9000,
                  "unit": "万元"
                },

                  {
                    "name": "工业用电量",
                    "value": 1800,
                    "unit": "万千瓦时"
                  },
                  {
                    "name": "工业就业人数",
                    "value": 1200,
                    "unit": "人"
                  }
                ]
              },
              {
                "tow": "铧尖镇",
                "data": [{
                  "name": "工业总产值",
                  "value": 4000,
                  "unit": "万元"
                },

                  {
                    "name": "工业用电量",
                    "value": 800,
                    "unit": "万千瓦时"
                  },
                  {
                    "name": "工业就业人数",
                    "value": 600,
                    "unit": "人"
                  }
                ]
              },
              {
                "tow": "三墩镇",
                "data": [{
                  "name": "工业总产值",
                  "value": 10000,
                  "unit": "万元"
                },

                  {
                    "name": "工业用电量",
                    "value": 2200,
                    "unit": "万千瓦时"
                  },
                  {
                    "name": "工业就业人数",
                    "value": 1300,
                    "unit": "人"
                  }
                ]
              },
              {
                "tow": "黄泥堡乡",
                "data": [{
                  "name": "工业总产值",
                  "value": 2000,
                  "unit": "万元"
                },

                  {
                    "name": "工业用电量",
                    "value": 400,
                    "unit": "万千瓦时"
                  },
                  {
                    "name": "工业就业人数",
                    "value": 300,
                    "unit": "人"
                  }
                ]
              },
              {
                "tow": "西洞镇",
                "data": [{
                  "name": "工业总产值",
                  "value": 3000,
                  "unit": "万元"
                },

                  {
                    "name": "工业用电量",
                    "value": 600,
                    "unit": "万千瓦时"
                  },
                  {
                    "name": "工业就业人数",
                    "value": 400,
                    "unit": "人"
                  }
                ]
              },
              {
                "tow": "总寨镇",
                "data": [{
                  "name": "工业总产值",
                  "value": 8000,
                  "unit": "万元"
                },

                  {
                    "name": "工业用电量",
                    "value": 1700,
                    "unit": "万千瓦时"
                  },
                  {
                    "name": "工业就业人数",
                    "value": 1100,
                    "unit": "人"
                  }
                ]
              },
              {
                "tow": "上坝镇",
                "data": [{
                  "name": "工业总产值",
                  "value": 6000,
                  "unit": "万元"
                },

                  {
                    "name": "工业用电量",
                    "value": 1300,
                    "unit": "万千瓦时"
                  },
                  {
                    "name": "工业就业人数",
                    "value": 900,
                    "unit": "人"
                  }
                ]
              },
              {
                "tow": "东洞镇",
                "data": [{
                  "name": "工业总产值",
                  "value": 2500,
                  "unit": "万元"
                },

                  {
                    "name": "工业用电量",
                    "value": 500,
                    "unit": "万千瓦时"
                  },
                  {
                    "name": "工业就业人数",
                    "value": 350,
                    "unit": "人"
                  }
                ]
              },
              {
                "tow": "金佛寺镇",
                "data": [{
                  "name": "工业总产值",
                  "value": 3500,
                  "unit": "万元"
                },

                  {
                    "name": "工业用电量",
                    "value": 700,
                    "unit": "万千瓦时"
                  },
                  {
                    "name": "工业就业人数",
                    "value": 450,
                    "unit": "人"
                  }
                ]
              },
              {
                "tow": "丰乐镇",
                "data": [{
                  "name": "工业总产值",
                  "value": 2800,
                  "unit": "万元"
                },

                  {
                    "name": "工业用电量",
                    "value": 450,
                    "unit": "万千瓦时"
                  },
                  {
                    "name": "工业就业人数",
                    "value": 320,
                    "unit": "人"
                  }
                ]
              },
              {
                "tow": "清水镇",
                "data": [{
                  "name": "工业总产值",
                  "value": 4000,
                  "unit": "万元"
                },

                  {
                    "name": "工业用电量",
                    "value": 800,
                    "unit": "万千瓦时"
                  },
                  {
                    "name": "工业就业人数",
                    "value": 500,
                    "unit": "人"
                  }
                ]
              },
              {
                "tow": "下河清镇",
                "data": [{
                  "name": "工业总产值",
                  "value": 3200,
                  "unit": "万元"
                },

                  {
                    "name": "工业用电量",
                    "value": 550,
                    "unit": "万千瓦时"
                  },
                  {
                    "name": "工业就业人数",
                    "value": 380,
                    "unit": "人"
                  }
                ]
              }
            ]
            this.toolList=list.filter(item => item.tow === this.cityName).map(item => item.data)[0]
            this.tooltipShow=true
          });
          this.charts[id].on('mouseout', () => {
            this.tooltipShow = false;
          });

        }
      }
      let option = await this[id + 'Option']();
      this.charts[id].setOption(option);
      this.charts[id].hideLoading();
    },
    async industryMapOption() {
      let dataList = [ {
        cityName:'西峰镇',
        "coord": [
          "98.476123",//西峰
          "39.733162"
        ]
      },{
        cityName:'总寨镇',
        "coord": [
          "98.669292",
          "39.656433"
        ]
      },{
        cityName:'银达镇',
        "coord": [
          "98.571037",
          "39.803381"
        ]
      },{
        cityName:'三墩镇',
        "coord": [
          "98.731518",
          "39.788872"
        ]
      },{
        cityName:'铧尖镇',
        "coord": [
          "98.657341",//铧尖
          "39.717085"
        ]
      },{
        cityName:'上坝镇',
        "coord": [
          "98.712407",//上坝
          "39.612822"
        ]
      },
        {
          cityName:'下河清',
          "coord": [
            "98.980462",//下河清
            "39.560477"
          ]
        },
        {
          cityName:'东洞镇',
          "coord": [
            "98.63409",//东洞镇
            "39.551714"
          ]
        },{
          cityName:'西洞镇',
          "coord": [
            "98.459281",//西洞镇
            "39.65431"
          ]
        },
        {
          cityName:'黄泥堡乡',
          "coord": [
            "98.834582",//黄泥堡乡
            "39.71755"
          ]
        },
        {
          cityName:'金佛寺镇',
          "coord": [
            "98.780061",//金佛寺镇
            "39.425904"
          ]
        }, {
          cityName:'丰乐镇',
          "coord": [
            "98.897147",//丰乐镇
            "39.389238"
          ]
        }, {
          cityName:'清水镇',
          "coord": [
            "99.065828",//清水镇
            "39.365553"
          ]
        },
        {
          cityName:'果园镇',
          "coord": [
            "98.486738",//果园镇
            "39.786748"
          ]
        },
      ];
      let electricPileIcon = await staticImageToBase64(require('@/assets/images/theme-blue/runing.png'));
      let geoCoordMap = {};
      const geoJson = require('@/assets/geo/suzhouqu.json');
      this.$echarts.registerMap('szq', {geoJSON: geoJson});
      geoJson.features.forEach(function (v) {
        var name = v.properties.name;
        // 地区经纬度
        geoCoordMap[name] = v.properties.centroid;
      });
      let size = '40%';
      let roam = false;
      let zoom = 3;
      return {
        geo: [{
          animationDuration: 0,
          animationDurationUpdate: 0,
          layoutCenter: ['50%', '55%'],//位置
          layoutSize: size,//大小
          show: true,
          map: 'szq',
          roam,
          zoom,
          aspectScale: 1,
          label: {
            normal: {
              show: false,
              textStyle: {
                color: '#fff',
                fontSize: 14
              }
            },
            emphasis: {
              show: true,
              textStyle: {
                color: '#fff'
              }
            }
          },
          select: {
            label: {
              color: '#fff'
            },
            itemStyle: {
              areaColor: {
                type: "linear",
                x: 6000,
                y: 0,
                x2: 0,
                y2: 0,
                colorStops: [{
                  offset: 0,
                  color: "rgba(3,27,78,0.75)", // 0% 处的颜色
                }, {
                  offset: 1,
                  color: "rgba(58,149,253,0.75)", // 50% 处的颜色
                },],
                global: true, // 缺省为 false
              },
              borderColor: "#c0f3fb",
              borderWidth: 1,
              shadowColor: "#8cd3ef",
              shadowOffsetY: 10,
              shadowBlur: 120,
            }
          },
          emphasis: {
            label: {
              color: '#fff'
            },
            itemStyle: {
              areaColor: {
                type: "linear",
                x: 6000,
                y: 0,
                x2: 0,
                y2: 0,
                colorStops: [{
                  offset: 0,
                  color: "rgba(3,27,78,0.75)", // 0% 处的颜色
                }, {
                  offset: 1,
                  color: "rgba(58,149,253,0.75)", // 50% 处的颜色
                },],
                global: true, // 缺省为 false
              },
              borderColor: "#c0f3fb",
              borderWidth: 1,
              shadowColor: "#8cd3ef",
              shadowOffsetY: 10,
              shadowBlur: 120,
            }
          },
          itemStyle: {
            normal: {
              areaColor: {
                type: "linear",
                x: 6000,
                y: 0,
                x2: 0,
                y2: 0,
                colorStops: [{
                  offset: 0,
                  color: "rgba(3,27,78,0.75)", // 0% 处的颜色
                }, {
                  offset: 1,
                  color: "rgba(58,149,253,0.75)", // 50% 处的颜色
                },],
                global: true, // 缺省为 false
              },
              borderColor: "#c0f3fb",
              borderWidth: 1,
              shadowColor: "#8cd3ef",
              shadowOffsetY: 10,
              shadowBlur: 120,
            },
          }
        }, {
          animationDuration: 0,
          animationDurationUpdate: 0,
          type: "map",
          map: 'szq',
          zlevel: -1,
          aspectScale: 1,
          zoom,
          layoutCenter: ["50%", "56%"],
          layoutSize: size,
          roam,
          silent: true,
          itemStyle: {
            normal: {
              borderWidth: 1,
              // borderColor:"rgba(17, 149, 216,0.6)",
              borderColor: "rgba(58,149,253,0.8)",
              shadowColor: "rgba(172, 122, 255,0.5)",
              shadowOffsetY: 5,
              shadowBlur: 15,
              areaColor: "rgba(5,21,35,0.1)",
            },
          },
        }, {
          animationDuration: 0,
          animationDurationUpdate: 0,
          type: "map",
          map: 'szq',
          zlevel: -2,
          aspectScale: 1,
          zoom,
          layoutCenter: ["50%", "57%"],
          layoutSize: size,
          roam,
          silent: true,
          itemStyle: {
            normal: {
              borderWidth: 1,
              // borderColor: "rgba(57, 132, 188,0.4)",
              borderColor: "rgba(58,149,253,0.6)",
              shadowColor: "rgba(65, 214, 255,1)",
              shadowOffsetY: 5,
              shadowBlur: 15,
              areaColor: "transpercent",
            },
          },
        }, {
          animationDuration: 0,
          animationDurationUpdate: 0,
          type: "map",
          map: 'szq',
          zlevel: -3,
          aspectScale: 1,
          zoom,
          layoutCenter: ["50%", "58%"],
          layoutSize: size,
          roam,
          silent: true,
          itemStyle: {
            normal: {
              borderWidth: 1,
              // borderColor: "rgba(11, 43, 97,0.8)",
              borderColor: "rgba(58,149,253,0.4)",
              shadowColor: "rgba(58,149,253,1)",
              shadowOffsetY: 15,
              shadowBlur: 10,
              areaColor: "transpercent",
            },
          },
        }, {
          animationDuration: 0,
          animationDurationUpdate: 0,
          type: "map",
          map: 'szq',
          zlevel: -4,
          aspectScale: 1,
          zoom,
          layoutCenter: ["50%", "59%"],
          layoutSize: size,
          roam,
          silent: true,
          itemStyle: {
            normal: {
              borderWidth: 5,
              // borderColor: "rgba(11, 43, 97,0.8)",
              borderColor: "rgba(5,9,57,0.8)",
              shadowColor: "rgba(29, 111, 165,0.8)",
              shadowOffsetY: 15,
              shadowBlur: 10,
              areaColor: "rgba(5,21,35,0.1)",
            },
          },
        },],
        series: [
          {
            animationDuration: 0,
            animationDurationUpdate: 0,
            type: 'map',
            map: 'szq',
            geoIndex: 0,
            aspectScale: 1,//长宽比
            zoom,
            showLegendSymbol: true,
            roam,
            markPoint: {
              symbol: 'image://' + electricPileIcon,
              symbolSize: [26,26],
              data: dataList,
            },
          },
        ],
      };
    },
  },
  beforeDestroy() {
    Object.keys(this.charts).forEach(item => {
      this.charts[item] && this.charts[item].dispose();
      this.charts[item] = null;
    });
  },
  async mounted() {
    Object.keys(this.charts).forEach(item => {
      this.initChart(item);
    });
  }
};
</script>

<style lang="scss" scoped>
.overall-page {
  position: relative;
  padding: 90px 20px 20px 20px;
  .overall-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;
    position: relative;
    z-index: 9;
  }
  .cusHeight {
    height: 260px;
  }
  .top-container {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .top-item {
      width: calc(29% - 10px);
    }
    .top-item1 {
      width: 42%;
      height: 550px;
      .map-tooltip {
        position: absolute;
        z-index: 9;
        background: #fff;
        width: 450px;
        height: 250px;
        right: 29%;
        bottom: 35%;
        background: url("~@/assets/images/theme-blue/common/monitoring-over-modal.png") no-repeat center;
        background-size: 100% 100%;

        .map-tooltip-title {
          display: flex;
          align-items: center;
          color: #29F1FA;
          font-family: fzhzgbjianti;
          font-size: 24px;
          padding-left: 20px;
          height: 60px;
        }

        .map-tooltip-content {
          width: 95%;
          margin: 0 auto;
          height: calc(100% - 85px);
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;

          .tooltip-item {
            width: calc(100% / 3 - 10px);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            .value {
              display: flex;
              align-items: flex-end;
              margin-bottom: 10px;

              .number {
                font-weight: bold;
                font-size: 24px;
                color: #FFCB00;
              }

              .unit {
                color: #29F1FA;
                font-size: 13px;
              }
            }

            .label {
              color: #29F1FA;
            }
          }
        }
      }
    }
  }
  .info-block {
    width: 100%;
    .info-container {
      width: 100%;
      display: flex;
      align-items: center;
      margin-top: 15px;
      .info-item {
        width: calc((100% - 30px) / 3);
        margin-right: 15px;
      }
      .info-item:nth-child(3n) {
        margin-right: 0;
      }
    }
  }
  .scroll-item{
    color: #FFFFFF;
    padding: 10px;
    font-size: 15px;
    text-indent: 30px;
  }
}
</style>
